<template>
  <div class="full-height bg-white page-content content relative-position ">
    <yz-condition-filter
      v-model="queryParams"
      @resetSearch="resetSearch"
      @onSubmit="onSubmit"
      class="padding-t-20"
    >
      <yz-input
        v-model.trim="queryParams.dateRange"
        class="q-mr-md"
        inputType="date"
        :disabledType="notDisableDate"
        hint="选择时间范围"
        isTip
        title="循环开始日期"
      ></yz-input>
      <q-icon name="iconfont icontubiao-72" class="font-18 text-grey q-mt-sm q-mr-md" style="margin-left: -10px">
        <q-tooltip>可查看一年内的能耗明细</q-tooltip>
      </q-icon>
      <workshop-search v-model="queryParams" ref="workShopSearch" :is-shift="false" @endDevice="endDevice"/>
    </yz-condition-filter>
    <div class=" form-inline">
      <export-btn
        label="导出Excel"
        :exportFun="exportFun"
        :disable="!tableData.length"
        :exportParams="setParams(queryParams)"
        :exportName="`${startDate}-${endDate}_机台列表_能耗循环明细.xls`"/>
    </div>
    <q-table
      :data="tableData"
      :columns="columns"
      row-key="id"
      class="myTable scroll"
      :loading="isTableLoading"
      :pagination.sync="pagination"
      :hide-bottom="tableData.length > 0"
      no-data-label="暂无数据"
      color="primary"
    >
    </q-table>
    <yz-pagination v-model="pagination" @onSearch="getList"/>
  </div>
</template>
<script>
import moment from 'moment'
import { getEnergyStatList, exportEnergyStatList } from '../../boot/statistics/stop-stat'
import _ from 'lodash'
import { secondToString } from '../../assets/js/util'
// import _ from 'lodash'

export default {
  name: 'energy-stat',
  data () {
    return {
      exportFun: exportEnergyStatList,
      isTableLoading: false,
      queryParams: {
        dateRange: [moment(new Date()).subtract(7, 'days').toDate(), new Date()],
        location: {
          id: null,
          level: null,
          label: '',
          hash: ''
        },
        workshopId: '',
        devices: ['all']
      },
      startDate: '',
      endDate: '',
      pagination: {
        pageNum: 1, // 当前页码
        pageSize: 15, // 每页条数
        rowsNumber: 0 // 总条数
      },
      deviceOptions: [], // 所选设备Id列表
      columns: [
        { name: 'device_name', label: '设备名称(编码)', align: 'left', field: 'device_name' },
        { name: 'spend_time', label: '循环用时', align: 'left', field: 'spend_time' },
        { name: 'program_name', label: '程序号', align: 'left', field: 'program_name' },
        { name: 'start_time', label: '循环开始时间', align: 'left', field: 'start_time' },
        { name: 'end_time', label: '循环结束时间', align: 'left', field: 'end_time' }
      ],
      cloneParams: {},
      // 表格内容
      tableData: []
    }
  },
  mounted () {
    this.getListInit()
  },
  methods: {
    endDevice (val) {
      this.deviceOptions = val
    },
    getListInit () {
      this.$refs.workShopSearch.getWorkshops().then(() => {
        this.getList()
      })
    },
    // 非yi年之前
    notDisableDate (date) {
      const disableDate = moment(new Date()).startOf('day').subtract(12, 'months')
      return date < new Date(disableDate)
    },
    // 重置
    resetSearch () {
      Object.assign(this.queryParams, this.$options.data.call(this).queryParams)
      this.$refs.workShopSearch.initData()
    },
    setParams (params) {
      const { location, dateRange } = params
      let [ startDate, endDate ] = this.$utils.setDateOSI(dateRange)
      let [ startDateNew, endDateNew ] = this.$utils.setDateOSI(dateRange, true, 'YYYYMMDD')
      this.startDate = startDateNew
      this.endDate = endDateNew
      params.deviceTreeReqVO = {
        deviceIds: params.devices[0] !== 'all' ? params.devices : [],
        level: location.level || null,
        schemeId: location.id || null
      }
      params.startDate = startDate
      params.endDate = endDate
      return params
    },
    setColumns (arr) {
      return arr.map(v => {
        return {
          name: v.key,
          label: v.value,
          align: 'left',
          field: v.key
        }
      })
    },
    // 获取数据
    getList () {
      const params = this.setParams({
        ...this.pagination,
        ...this.queryParams
      })
      this.cloneParams = _.cloneDeep(this.queryParams)
      this.isTableLoading = true
      getEnergyStatList(params).then((res) => {
        const ret = res.data
        ret.headers && (this.columns = this.setColumns(ret.headers))
        this.$nextTick(() => {
          this.tableData = ret.list.map(v => {
            return {
              ...v,
              spend_time: v.spend_time ? secondToString(v.spend_time) : '--'
            }
          })
          this.pagination.rowsNumber = ret.total
        })
        this.isTableLoading = false
      }).catch((err) => {
        console.log(err)
        this.isTableLoading = false
      })
    },
    // 查询
    onSubmit () {
      this.getList()
    }
  }
}
</script>
